<template>
  <div>
    <van-nav-bar
      title="发布二手信息"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-button
          type="primary"
          size="small"
          @click="send"
        >发布</van-button>
      </template>
    </van-nav-bar>
    <!-- 发布的模块 -->
    <div class="box">
      <van-row>
        <van-col
          span="2"
          :offset="2"
        >
          <van-image
            width="0.7rem"
            height="0.7rem"
            :src="'apis/kuan_api/ProductImg/'+product.ProductImg"
            fit="contain"
            style="padding-top:7px"
          />
        </van-col>
        <van-col span="12">
          <p style="margin-top:14px;font-size:13px">
            {{product.ProductName}}</p>
        </van-col>
      </van-row>
    </div>
    <hr class="hr">
    <!-- 输入信息 -->
    <div class="box">
      <van-cell-group inset>
        <van-field
          type="text"
          placeholder="宝贝品牌型号"
          v-model="pingpai"
        />
        <van-field
          v-model="message"
          rows="4"
          autosize
          :border="false"
          type="textarea"
          maxlength="999"
          placeholder="写写宝贝的转手原因，入手渠道等具体信息吧"
        />
        <van-row>
          <van-col
            span="5"
            :offset="1"
          >
            <van-uploader
              v-model="fileList"
              multiple
            />
          </van-col>
          <van-col span="16">
            <p style="text-align:center;padding-top:5px;font-size:13px;color:gray">添加真实详细的商品照片<br />
              首图会作为动态封面</p>
          </van-col>
        </van-row>
      </van-cell-group>
    </div>
    <hr class="hr">
    <!-- 商品信息 -->
    <div class="box">
      <van-cell-group inset>
        <!-- 未出价 -->
        <van-cell
          v-if="dingjia==''"
          title="开个价"
          icon="after-sale"
          is-link
          @click="price=true"
        />
        <!-- 已出价 -->
        <van-cell
          v-else
          title="开个价"
          icon="after-sale"
          @click="price=true"
          style="color:green"
        >
          <template #right-icon>
            ￥{{dingjia}}
          </template>
        </van-cell>
        <!-- 未选择身份 -->
        <van-cell
          v-if="radio==''"
          title="我的身份"
          icon="manager-o"
          center
        >
          <template #right-icon>
            <van-radio-group
              v-model="radio"
              direction="horizontal"
            >
              <van-radio name="商家">个人</van-radio>
              <van-radio name="个人">商家</van-radio>
            </van-radio-group>
          </template>
        </van-cell>
        <!-- 已选择身份 -->
        <van-cell
          v-else
          title="我的身份"
          icon="manager-o"
          center
          style="color:green"
        >
          <template #right-icon>
            <van-radio-group
              v-model="radio"
              direction="horizontal"
            >
              <van-radio
                name="商家"
                checked-color="green"
              >个人</van-radio>
              <van-radio
                name="个人"
                checked-color="green"
              >商家</van-radio>
            </van-radio-group>
          </template>
        </van-cell>
        <van-cell
          title="基本参数"
          icon="graphic"
          is-link
          @click="canshu=true"
        />
      </van-cell-group>
    </div>
    <hr class="hr">
    <!-- 定价弹出层 -->
    <van-popup
      v-model="price"
      round
      style="width:80%;margin:0 auto;height:auto"
    >
      <div style="width:90%;margin:0 auto">
        <p style="font-size:17px">你想卖多少钱？</p>
        <van-radio-group v-model="sel_sell">
          <div>
            <van-row style="margin-bottom:25px">
              <van-col span="10">
                <van-radio
                  name="1"
                  style="height:44px;line-height:44px"
                >定价</van-radio>
              </van-col>
              <van-col span="12">
                <van-field
                  type="text"
                  placeholder="输入出售价格"
                  v-model="dingjia"
                  style="border:1px solid lightgray"
                  @click="sel_sell='1'"
                />
              </van-col>
            </van-row>
          </div>
          <van-radio name="2">价格面议</van-radio>
        </van-radio-group>
      </div>
      <div style="text-align:right;margin:25px;padding-right:15px">
        <van-button
          style="border:0;color:#61a283"
          @click="price=false"
        >取消</van-button>
        <van-button
          style="border:0;color:#61a283"
          @click="price=false"
        >确定</van-button>
      </div>
    </van-popup>
    <!-- 商品参数弹出层 -->
    <van-popup
      v-model="canshu"
      :style="{ width: '100%',height:'100%' }"
    >
      <van-row style="border-bottom:1px solid lightgray">
        <van-col span="20">
          <van-button
            style="border:0"
            @click="canshu=false"
          >
            <van-icon name="arrow-left" />
          </van-button>
        </van-col>
        <van-col span="4">
          <van-button
            style="border:0"
            @click="canshu=false"
          >跳过</van-button>
        </van-col>
      </van-row>
      <div style="width:90%;margin:0 auto">
        <p>颜色</p>
        <van-radio-group
          v-model="color"
          direction="horizontal"
        >
          <van-radio name="黑色">黑色</van-radio>
          <van-radio name="白色">白色</van-radio>
          <van-radio name="银色">银色</van-radio>
          <van-radio name="红色">红色</van-radio>
          <van-radio name="其他">其他</van-radio>
        </van-radio-group>
        <p>运行内存</p>
        <van-radio-group
          v-model="yunxing"
          direction="horizontal"
        >
          <van-radio name="2G">2G</van-radio>
          <van-radio name="3G">3G</van-radio>
          <van-radio name="4G">4G</van-radio>
          <van-radio name="6G">6G</van-radio>
          <van-radio name="8G">8G</van-radio>
          <van-radio name="10G">10G</van-radio>
          <van-radio name="12G">12G</van-radio>
        </van-radio-group>
        <p>容量</p>
        <van-radio-group
          v-model="rongliang"
          direction="horizontal"
        >
          <van-radio name="16G">16G</van-radio>
          <van-radio name="32G">32G</van-radio>
          <van-radio name="64G">64G</van-radio>
          <van-radio name="128G">128G</van-radio>
          <van-radio name="256G">256G</van-radio>
          <van-radio name="512G">512G</van-radio>
          <van-radio name="1T">1T</van-radio>
          <van-radio name="其他">其他</van-radio>
        </van-radio-group>
        <p>成色</p>
        <van-radio-group
          v-model="chengse"
          direction="horizontal"
        >
          <van-radio name="全新">全新</van-radio>
          <van-radio name="99新">99新</van-radio>
          <van-radio name="95新">95新</van-radio>
          <van-radio name="9新">9新</van-radio>
          <van-radio name="8新">8新</van-radio>
          <van-radio name="8新以下">8新以下</van-radio>
        </van-radio-group>
        <p>选填项</p>
        <van-checkbox-group
          v-model="othersel"
          direction="horizontal"
        >
          <van-checkbox
            name="包邮"
            shape="square"
          >包邮</van-checkbox>
          <van-checkbox
            name="有发票"
            shape="square"
          >有发票</van-checkbox>
          <van-checkbox
            name="有配件"
            shape="square"
          >有配件</van-checkbox>
          <van-checkbox
            name="有包装"
            shape="square"
          >有包装</van-checkbox>
          <van-checkbox
            name="有拆机维修"
            shape="square"
          >有拆机维修</van-checkbox>
          <van-checkbox
            name="功能有损坏"
            shape="square"
          >功能有损坏</van-checkbox>
        </van-checkbox-group>
      </div>
      <div style="margin-top:15px">
        <van-button
          type="primary"
          block
          @click="selectcanshu"
        >选好了</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "sellused",
  data() {
    return {
      radio: "",
      sel_sell: "",
      price: false,
      dingjia: "",
      pingpai: "",
      message: "",
      fileList: [],
      product: [],
      productid: "",
      canshu: false,
      // 颜色
      color: "",
      // 运行内存
      yunxing: "",
      // 容量
      rongliang: "",
      // 成色
      chengse: "",
      // 选填项
      othersel: [],
    };
  },
  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
    // 获取模块信息
    getmodule() {
      this.axios
        .post("apis/kuan_api/getproduct.php", {
          productid: this.productid,
        })
        .then((res) => {
          console.log(res.data.product);
          this.product = res.data.product[0];
          console.log(this.product);
        });
    },
    selectcanshu() {
      this.canshu = false;
    },
    send() {
      console.log(this.fileList[0].file);
      let userid = this.$store.state.user.user_id;
      let code = 1;
      let title = this.pingpai;
      let info = this.message;
      let price = this.dingjia;
      let identity = this.radio;
      let color = this.color;
      let yunxing = this.yunxing;
      let rongliang = this.rongliang;
      let chengse = this.chengse;
      let othersel = this.othersel;
      let file = this.fileList[0].file;
      let categoryid = this.productid;
      let config = { headers: { "Content-Type": "multipart/form-data" } };
      let param = new FormData();
      param.append("userid", userid);
      param.append("code", code);
      param.append("title", title);
      param.append("info", info);
      param.append("price", price);
      param.append("color", color);
      param.append("identity", identity);
      param.append("yunxing", yunxing);
      param.append("rongliang", rongliang);
      param.append("chengse", chengse);
      param.append("othersel", othersel);
      param.append("file", file);
      param.append("categoryid", categoryid);
      for (var value of param.values()) {
        console.log(value);
      }
      console.log(param.getAll("file"));
      this.axios
        .post("apis/kuan_api/trade.php", param, config)
        .then((res) => {
          if (res.data.errorCode == 1) {
            this.$toast.success("发布成功");
            window.history.go(-1)
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  created() {
    this.productid = this.$route.query.id;
    this.getmodule();
  },
};
</script>

<style scoped>
.hr {
  height: 8px;
  border: 0;
  background-color: #f5f5f5;
}
.van-radio--horizontal {
  width: 100px;
  height: 35px;
}
.van-checkbox--horizontal {
  width: 100px;
  height: 30px;
}
</style>